<!--二级平行轴传动比分配-->
<template>
  <div class="all" >
    <a-row class="all_row">
      <a-col span="12" class="left_col">
        <div class="left_col_1">
          <div class="left_col_1_1">
            <div class="left_col_1_1_1" style="background: #D7D7D7">输入参数</div>
            <div class="left_col_1_1_2" style="display: flex;list-style-type: none">
              <div class="left_col_1_1_2_1">
                <ul class="text1">
                  <li >总传动比</li>
                  <li>低速级小轮宽径比上限值</li>
                  <li>高速级小轮宽径比上限值</li>
                  <li>平行轴单级齿数比限制值</li>
                </ul>
              </div>
              <div class="left_col_1_1_2_2">
                <ul class="text2">
                  <li><input v-model="form.R0" class="text6"/></li>
                  <li><input v-model="form.B1min" class="text6"/></li>
                  <li><input v-model="form.B2min" class="text6"/></li>
                  <li><input v-model="form.ratio_parallel" class="text6"/></li>
                </ul>
              </div>
            </div>
            <div class="left_col_1_1_3" style="display: flex">
            <span style="width: 25%;height: 100%;text-align: center">
              <input  v-model="form.ratio_D1_D2_min" style="width: 70%;height:25%;margin-top: 25%" />
            </span>
              <span style="width: 50%;height: 100%;margin-right: 2%;">
              <img style="width: 100%;margin-top: 4%" src="../../../assets/image/image_56_1.png"  />
            </span>
              <span style="width: 25%;height: 100%;">
              <input v-model="form.ratio_D1_D2_max"   style="width: 70%;height:25%;margin-top: 25%" />
            </span>
            </div>
          </div>
          <div class="left_col_1_2">
            <div class="left_col_1_2_1" style="background: #D7D7D7">
              以体积最小为目标函数
            </div>
            <div  class="left_col_1_2_2" style="margin-left: 12%;margin-right: 12%;margin-top:10%;margin-bottom: 10%;height: 63%;width: 76%;background-color:#F2F2F2">
              <table style="width: 100%;text-align: center;border-radius:3px;background-color:#F2F2F2">
                <tr style="width: 100%;height:70%;background-color:#EAEAEA">
                  <th class="text3">低速级齿轮比</th>
                  <th class="text3">高速级齿轮比</th>
                  <th class="text3">总体积表征量</th>
                </tr>
                <tr v-for="(item,index) in ans.v_N" :key="index">
                  <td>{{item[0]}}</td>
                  <td>{{item[1]}}</td>
                  <td>{{item[2]}}</td>
                </tr>

              </table>
            </div>
          </div>
        </div>
        <div class="left_col_2">
          <div class="left_col_2_1" style="background: #D7D7D7">
            以外径最小为目标函数
          </div>
          <div  class="left_col_2_2" style="margin-left: 2%;margin-right: 2%;margin-top: 2%;margin-bottom: 2%;height: 56%;width: 96%;background-color:#F2F2F2">
            <table style="width: 100%;text-align: center;background-color:#F2F2F2">
              <tr style="width: 100%;height:70%;background-color:#EAEAEA">
                <th class="text4">低速级齿轮数</th>
                <th class="text4">高速级齿轮数</th>
                <th class="text4">总体积表征量</th>
                <th class="text4">低速级外半径表征值</th>
                <th class="text4">高速级外半径表征值</th>
                <th class="text4">低速级小轮实际宽径比</th>
                <th class="text4">高速级小轮实际宽径比</th>
                <th class="text4">低速级与高速级齿宽比</th>
              </tr>
              <tr v-for="(item,index) in ans.d_N_s" :key="index">
                <td>{{item[0]}}</td>
                <td>{{item[1]}}</td>
                <td>{{item[2]}}</td>
                <td>{{item[3]}}</td>
                <td>{{item[4]}}</td>
                <td>{{item[5]}}</td>
                <td>{{item[6]}}</td>
                <td>{{item[7]}}</td>
              </tr>
            </table>
          </div>

          <div class="left_col_2_3">
            <button class="text5" @click="tclick">计算</button>
          </div>
        </div>
        <div class="left_col_3">
          <span style="width: 50%;height: 100%;margin-right: 2%;">
              <img style="width: 90%;height:80%;margin-top: 2%;margin-left: 5%;" src="../../../assets/image/image_56_2.png"  />
            </span>
        </div>
      </a-col>
      <a-col span="12" class="right_col">
        <div style="width: 90%;height: 100%;margin-left: 2%;margin-right: 10%" ref="chart"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>

import * as echarts from 'echarts';
import {check2} from "@/api/file";
export default {
  created() {
    document.title='二级平行轴传动比分配'
    this.$store.state.file.key = 56 //设置key为自己的页面编号
  },
  name: "二级平行轴传动比分配",
  data() {
    return {
      form: this.$store.state.file.dataList[56],
      ans:{
        v_N:[[]],
        d_N_s:[[]],
        chart:[[]]
      }
    }
  },
  methods: {
    init() {
      //2.初始化
      this.chart = echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        title:{text: '最小体积示意图1高速级齿数比'},
        xAxis: {name:'高速级齿数比' }, //X轴
        yAxis: {name:'体积表征量' }, //Y轴
        series: [{ data: this.ans.chart, type: 'line',smooth:true}] //配置项
      };
      // 4.传入数据
      this.chart.setOption(option);
    },
    tclick() {
      check2(this.form)
          .then(res => {
            console.log(res);
            this.ans = res;
            this.init();
          })
          .catch(err => {
            this.$message.error(err);
          });
    }
  }
}
</script>

<style scoped>

.all
{
  width:100%;
  height: 100%;
}
li{
  list-style-type: none;
}
.all_row
{
  width: 100%;
  height: 100%;
}
.left_col
{
  width: 50%;
  height: 100%;
}
.left_col_1
{
  width:100%;
  height:32.5%;
  position: relative;
}
.left_col_1_1
{
  width:50%;
  height: 100%;
  position: absolute;
  left:0;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
  margin-top: 1%;
  margin-left: 2%;
}
.left_col_1_1_1
{
  width:100%;
  height:10%;
}
.left_col_1_1_2
{
  width:100%;
  height:50%;

}
.left_col_1_1_2_1
{
  width:50%;
  height:100%;
}
.left_col_1_1_2_2
{
  width:50%;
  height:100%;
}
.text1
{
  text-align: right;
  margin-right: 5%;
  height:100%;
}
.text2
{
  text-align: left;
  height:100%;
}
.text1 li{
  height: 25%;
}
.text2 li{
  height: 25%;
}
.text2 li input{
  height: 85%;
  width: 50%;
}
.text5
{
  margin-left: 80%;
  margin-top: -20%;
  background-color: #D7D7D7;
  border-radius: 4px;
  border: 2px ;
  width:11%;

}
.text4
{
  width:2%;
}
.text3
{
  width:1%
}
.text6
{
  margin-left: 3%;

}
.left_col_1_1_3
{
  width:100%;
  height: 40%;
}
.left_col_1_2
{
  width:45%;
  height: 100%;
  position: absolute;
  right: 0;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
  margin-top: 1%;
  margin-left: 0%;
}
.left_col_1_2_1
{
  width:100%;
  height:10%;
}
.left_col_2
{
  width:98%;
  height:24.4%;
  margin-top: 2%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
  margin-left: 2%;
}
.left_col_2_1
{
  width:100%;
  height: 15%;
}
.left_col_2_3
{
  width: 100%;
  height:29%;
  margin-top: -1%;
}
.left_col_3
{
  width:98%;
  height: 36%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
  margin-left: 2%;
  margin-top: 2%;
}
.right_col
{
  width:50%;
  height: 100%;
}
.right_col_1
{
  width:100%;
  height:75.4%;

}
.right_col_1_1
{
  width:100%;
  height:10%;

}
.right_col_1_2
{
  width:100%;
  height:10%;

}
.right_col_1_3
{
  width: 100%;
  height: 80%;

}
.right_col_2
{
  width: 100%;
  height: 24.6%;
  position: relative;
}
.right_col_2_1
{
  width:33.4%;
  height:100%;
  position: absolute;
  left: 0;
}
.right_col_2_2
{
  width:33.3%;
  height:100%;
  position: absolute;
  left: 33.4%;
}
.right_col_2_3
{
  width:33.3%;
  height:100%;
  position: absolute;
  right: 0;
}
</style>